<template>
  <el-dialog
    :visible="dialogVisible"
    :close-on-click-modal="false"
    title="高级筛选"
    width="900px"
    @close="handleCancel">

    <div class="wk-advanced-filter">

      <form-content
        ref="formContent"
        :default-value="value"
        :field-list="fieldList"
        class="filter-container" />

      <div class="save-scene">
        <el-checkbox v-model="saveAsScene">保存为场景</el-checkbox>
        <template v-if="saveAsScene">
          <el-input
            v-model.trim="sceneForm.name"
            :maxlength="10"
            class="save-scene__input"
            placeholder="请输入场景名称，最多10个字符"/>
          <div class="save-scene__setting">
            <el-checkbox
              v-model="sceneForm.isDefault"
              :true-label="3"
              :false-label="0">
              设置为默认
            </el-checkbox>
          </div>
        </template>
      </div>
    </div>

    <div slot="footer">
      <el-button
        @click="handleCancel">
        取 消
      </el-button>
      <el-button
        type="primary"
        @click="handleConfirm">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * Created by yxk at 2020/6/5
 */
import FormContent from './FormContent'
import { isEmpty } from '@/utils/types'

export default {
  name: 'WkAdvancedFilter',
  components: {
    FormContent
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    fieldList: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: true,

      saveAsScene: false, // 是否保存为场景
      sceneForm: {
        name: '', // 场景名称
        isDefault: 0 // 是否设置为默认场景
      }
    }
  },
  methods: {
    handleCancel() {
      this.$emit('close')
    },
    handleConfirm() {
      const list = this.$refs.formContent.getValue()
      if (!list) return
      if (this.saveAsScene) {
        if (isEmpty(this.sceneForm.name)) {
          this.$message.error('场景名称不能为空！')
          return
        }
      }
      console.log('confirm list: ', list)
      this.$emit('input', list)
      this.$emit('confirm', {
        scene: this.saveAsScene ? this.sceneForm : null,
        list: list
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 10px 20px;
}

.wk-advanced-filter {
  .filter-container {
    max-height: 300px;
    overflow-y: auto;
  }

  .save-scene {
    margin-top: 10px;
    .save-scene__input {
      width: 300px;
      margin-left: 10px;
    }
    .save-scene__setting {
      margin-top: 20px;
    }
  }
}
</style>
